<template>    

    <!-- 好友发送 -->
    <div class="message-card" v-if="uid!=senderId">
        
        <!-- 说明消息是好友发送,消息靠左边 -->
        <div class="sender-info">
            <div class="sender-info-img">
                <el-image
                    style="width: 30px;height:30px;"
                    :src="messageInfo.SenderImgUrl"
                >
                </el-image>
            </div>

              <div class="msg-text" v-if="messageInfo.MsgType == 1">
                <span>
                    {{ messageInfo.Text }}
                </span>
            </div>

               
            <div class="msg-emoji" v-if="messageInfo.MsgType == 2">
                <span>
                    <el-image style="width: 25px; height: 25px" :src="messageInfo.EmojiUrl"/>
                </span>
            </div>

             <div class="msg-img" v-if="messageInfo.MsgType == 3">
                    <el-image 
                        :src="messageInfo.Text"
                        fit="cover"
                        :preview-src-list="srcList"
                        @click="showBigImg(true)"
                    ></el-image>
            </div>

        </div>

    </div>

    <!-- 本人发送 -->
    <div class="message-card-style2" v-if="uid==senderId">
        
        <div class="sender-info">

             <div class="msg-text" v-if="messageInfo.MsgType == 1">
            
                <span>
                    {{ messageInfo.Text }}
                </span>
            </div>
        
            <div class="msg-emoji" v-if="messageInfo.MsgType == 2">
                
                <span>
                    <el-image style="width: 25px; height: 25px" :src="messageInfo.EmojiUrl"/>
                </span>
            </div>

            <div class="msg-img" v-if="messageInfo.MsgType == 3">
                    <el-image 
                        :src="messageInfo.Text"
                        fit="cover"
                        :preview-src-list="srcList"
                        @click="showBigImg(true)"
                    ></el-image>
            </div>

           

            <div class="sender-info-img">
                    <el-image
                        style="width: 30px;height:30px;"
                        :src="messageInfo.SenderImgUrl"
                    >
                    </el-image>
            </div>

        </div>

         <el-dialog v-model="showBigImageRef" class="dialog-wrapper">
           <el-image
                :src="messageInfo.Text"
           >
           </el-image>
        </el-dialog>

       
    </div>

</template>

<script setup>
import {ref,reactive, onMounted} from 'vue'
import { useStore } from 'vuex'
const props = defineProps({
    messageInfo:{}
})

const initCardStyle = ()=> {
}
const store = useStore()
const uid = store.state.userInfo.userId
console.log("点击后发送的消息是",props.messageInfo);
const senderId = props.messageInfo.SenderId
console.log("点击后发送的消息是",props.messageInfo);

const showBigImageRef = ref(false)

const showBigImg = (flag)=>{
    console.log("显示大图片", flag);
    showBigImageRef.value = flag
}

</script>



<style scoped lang="scss">

.message-card {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    .sender-info {
        width: 100%;
        display: flex;
        .sender-info-name {
            span{
                font-weight: bold;
            }
        }
        .sender-info-img {
            margin-right: 10px;
            ::v-deep .el-image {
                margin-top: 3px;
            }
            border-radius: 50%;
        }
        .msg-text {
            color: white;
            max-width:60%;
            text-align: left;
            background-color: #606266;
            margin-left: 10px;
            border-radius: 10px; 
            span{
                display:inline-block;
                width:100%;
                border-radius: 10px;
                padding-left:10px;
                padding-right:10px;
                font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                letter-spacing: 0.3px;
                line-height: 36px;
                flex-wrap: wrap;
                text-align: left;
            }
        }
        .msg-emoji {
            // padding-left:30px;
            min-width: 5%;
            max-width:60%;
            text-align: left;
            span{
                width:100%;
                display:inline-block;
                margin-top: calc((36px - 25px)/2);
                margin-left: 20px;
            }
            // 增加箭头向左
            // clip-path: polygon(5% 0, 100% 0, 100% 100%,5% 100%, 5% 65%,0 50%,5% 35%);
            background-color: #606266;
            margin-left: 10px;
            border-radius: 10px;
        }
        .msg-img {

            margin-left: 10px;
            max-width: 60%;
            min-width: 5%;
            margin-right: 10px;
            :deep(.el-image__inner){
                border-radius: 0;
            }
            :deep(.el-image){
                width: 100px;
                height: 100px;
            }
            
        }
        
    }
   
}

.message-card-style2 {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    // 不设置高度,否则多行无法显示
    // height: 80px;
    .sender-info{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        .sender-info-name {
            span{
                font-weight: bold;
            }
        }
        :deep(.el-image__inner){
            :deep(.el-image) {
                margin-top: 3px;
            }
            border-radius: 50%;
        }
        .msg-text {
            color: white;
            // 设置文字显示的长度,超长后换行显示
            margin-left: 40px;
            text-align: right;
            max-width:60%;
            span {
                display:inline-block;
                // 设置文字显示的长度,超长后换行显示
                width:100%;
                border-radius: 10px;
                padding-left:10px;
                padding-right:10px;
                font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                letter-spacing: 0.3px;
                line-height: 36px;
                // 文字单行显示不下,换行
                flex-wrap: wrap;
                // 文字靠左排列
                text-align: left;
                
            }
            //增加箭头向右边
            // clip-path: polygon(0 0, 88% 0, 88% 35%, 89% 50%, 88% 65%, 88% 100%, 0 100%);
            background-color: #0d5302;
            margin-right: 10px;
            border-radius: 10px;
        }

         // 清除文档流,保证父元素高度不塌陷
        .msg-text::after{
            content:"";
            display: block;
            clear: both;
        }
        .msg-emoji {
            // padding-right:30px;
            background-color: #0d5302;
            margin-left: 10px;
            max-width: 60%;
            min-width: 5%;
            border-radius: 10px;
            text-align: left;
            margin-right: 10px;
            span{
                width:auto;
                display:inline-block;
                margin-top: calc((36px - 25px)/2);
                margin-left:20px ;
            }

            
        }
        .msg-emoji::after{
            content:"";
            display: block;
            clear: both;
        }
        .msg-img {

            margin-left: 10px;
            max-width: 60%;
            min-width: 5%;
            margin-right: 10px;
            :deep(.el-image__inner){
                border-radius: 0;
            }
            :deep(.el-image){
                width: 100px;
                height: 100px;
            }
            
        }

    }
    
    .el-dialog {
        :deep(.el-dialog__body) {
            position: relative;
            border: 1px solid green;
            :deep(.el-image__inner){
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                margin-left: 50px;
            }
        }   
    }
   
}


</style>